
<template>
  <div class="dialogBox">
    <el-input :style="{ width: width }" :size="size" v-model="selectionLabel" :placeholder="placeholder" suffix-icon="el-icon-search" :disabled="openDisabled" :readonly="true" @focus="dialogTableVisible = true">
    </el-input>
    <el-dialog title="选择设备厂家" append-to-body :visible.sync="dialogTableVisible" width="900px" custom-class="dLog">
      <el-row :gutter="24">
        <!--部门数据-->
        <el-col :span="24" :xs="24">
          <el-table cell-class-name="li_table" highlight-current-row :data="tableData" @current-change="handleCurrentChange" style="width: 100%;margin-bottom: 20px;" row-key="id" border :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
            <el-table-column align="center" prop="label" label="厂家名称">
            </el-table-column>
            <el-table-column align="center" prop="id" label="编码">
            </el-table-column>
          </el-table>
        </el-col>
      </el-row>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submit" :disabled="disabled">确 定</el-button>
        <el-button @click="dialogTableVisible = false">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import Lbtable from "@/components/lb-table/lb-table";
import { listSelect2 } from "@/api/report/process/label";
export default {
  props: {
    echoValue: {
      type: Number | String,
      default: "",
    },
    openDisabled: {
      type: Boolean | String,
      default: false,
    },
    placeholder: {
      type: String,
      default: "选择设备厂家",
    },
    value: {
      type: String || Number,
      default: "id",
    },
    label: {
      type: String,
      default: "label",
    },
    width: {
      type: String,
      default: "100%",
    },
    size: {
      type: String,
      default: "small",
    },
    dialogData: {
      // 返回的数据
      type: Array | Object,
      default: function () {
        return [];
      },
    },
  },
  watch: {
    echoValue: function (newVal, oldVal) {
      // this.selectionLabel = this.echoValue;
      this.selectionLabel = this.findPathByLeafId(
        this.echoValue,
        this.tableData
      );
    },
    dialogTableVisible: function (newVal, oldVal) {
      if (this.dialogTableVisible == true) {
        // this.modal = true;
        if (this.dialogData.length > 0) {
          this.tableData = this.dialogData;
          this.selectionLabel = this.findPathByLeafId(
            this.echoValue,
            this.dialogData
          );
        } else {
          this.getList();
        }
        this.selectList = {};
        this.disabled = true;
      }
    },
    // 是否禁用
    selectList(val) {
      try {
        if (JSON.stringify(this.selectList) == "{}") {
          this.disabled = true;
        } else {
          this.disabled = false;
        }
      } catch (e) {
        console.log(e);
        // 错误处理代码片段
      }
    },
  },
  created() {
    // this.selectionLabel = this.echoValue;
    if (this.dialogData.length > 0) {
      this.tableData = this.dialogData;
      this.selectionLabel = this.findPathByLeafId(
        this.echoValue,
        this.dialogData
      );
    } else {
      this.getList();
    }
  },
  data() {
    return {
      tableData: [],
      // 是否禁用
      disabled: false,
      // 是否加载
      loading: false,
      // 弹窗是否显示
      dialogTableVisible: false,

      currentRow: [],
      //选择后处理的对象
      selection: {
        value: null,
        label: null,
        options: null,
      },
      selectionLabel: "",
      selectList: null, //选择数据
    };
  },
  methods: {
    //初始化数据
    ininDada() {},
    findPathByLeafId(leafId, nodes, path) {
      if (path === undefined) {
        path = {};
      }
      for (var i = 0; i < nodes.length; i++) {
        var tmpPath = path;
        //   tmpPath.push(nodes[i].id);
        if (leafId == nodes[i].id) {
          tmpPath = nodes[i].label;
          // console.log(nodes[i])
          return tmpPath;
        }
        if (nodes[i].children) {
          var findResult = this.findPathByLeafId(
            leafId,
            nodes[i].children,
            tmpPath
          );
          if (findResult) {
            //  console.log(findResult)
            return findResult;
          }
        }
      }
    },
    //选择
    // selectionChange(val) {
    //   if (val instanceof Array == true) {
    //     for (let item of val) {
    //       item.pageNum = this.queryParams.pageNum;
    //     }
    //     this.selectList.push(...val);
    //     this.selectList = this.deWeightThree(this.selectList);
    //   } else {
    //     if (val != null) {
    //       this.selectList = val;
    //     }
    //   }
    // },
    // select(selection, row) {
    //   let temp = 0;
    //   if (selection instanceof Array == true) {
    //     if (this.selectList.length > 0) {
    //       for (let index in this.selectList) {
    //         if (this.selectList[index].userId == row.userId) {
    //           this.selectList.splice(index, 1);
    //           temp++;
    //         }
    //       }
    //       if (temp == 0) {
    //         row.pageNum = this.queryParams.pageNum;
    //         this.selectList.push(row);
    //       }
    //     }
    //   }
    // },
    handleCurrentChange(val) {
      this.selectList = val;
    },
    /** 查询岗位列表 */
    getList() {
      listSelect2().then((response) => {
        this.tableData = response.rows;
        this.selectionLabel = this.findPathByLeafId(
          this.echoValue,
          this.tableData
        );
      });
    },
    submit(e) {
      // console.log(this.selectList);
      let value = this.value;
      let label = this.label;
      this.selection.options = new Object();
      this.selection.value = new Object();
      this.selection.label = new Object();
      this.selection.options = this.selectList;
      this.selection.value = this.selectList[value];
      this.selection.label = this.selectList[label];
      this.selectionLabel = this.selection.label;
      this.$emit("dialogChange", this.selection);
      this.dialogTableVisible = false;
    },
  },
};
</script>

<style lang="scss" scoped>
.box {
  width: 100%;
  height: 100%;
  .item {
    width: 31%;
    height: 48%;
    float: left;
    margin: 0 0 1% 1.7%;
    background: rgba(9, 59, 118, 0.9);
    box-shadow: 0 0 7px #ccffff;
  }
}
</style>
<style lang="scss">
.dialogBox {
  .el-table {
    max-height: 50vh !important;
    padding: 0px;
    margin-top: 13px;
    background: rgb(15 47 86 / 70%) !important;
    overflow: auto;
  }
  .el-table__body tr.current-row > td {
    // background: #115395 !important;
    background: none !important;
    // background-color: #19204e !important;
  }
  .el-form {
    padding: 10px 12px;
    background: rgb(15 47 86 / 70%) !important;
  }
  .el-form-item {
    margin-bottom: 3px !important;
  }
  .el-radio__inner,
  .el-checkbox__inner {
    border: 1px solid #1890ff;
  }
  .el-radio__input.is-checked,
  .el-checkbox__input.is-checked {
    .el-radio__inner,
    .el-checkbox__inner {
      background: #1890ff;
    }
  }
}
</style>

